<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		/*
		 	text-align 可以控制文字或行内元素的水平对齐方式。
		 * */
			p{
				width: 50px;
				text-align: right;
				text-align: left;
				text-align: center;
				text-align: justify;/*两端对齐*/
			
				/*还可以控制行内元素
				 	都属于流式内容。
				 * */
			
				letter-spacing: 5px;
				/*
				 
				 * 用来控制文字间距
				 * */
			}
			
			p span{
				font-size: 20px;
				color: red;
			}
		</style>
	</head>
	<body>
		<p>
			哈哈，今天第四节CSS课。<span>呵呵<a href="">嘻嘻</a></span>
		</p>
	<style>
	/*单行文字溢出处理*/
		.div1{
			width: 50px;
			background: skyblue;
/*1禁用换行*/white-space: nowrap;
	/*2超出部分隐藏*/		overflow: hidden;
	/*3 出现省略号1*/		text-overflow: ellipsis;
		}
		
		
		
	</style>	
		<div class="div1">
			测试一下省略号是是否出现!
		</div>
		
		<style>
			.div2{
				font-size: 16px;
				width: 50px;
				height: 87px;/*多行省略的时候，要注意该高度，最好是等于最大行数乘以行高*/
				background: skyblue;
				overflow: hidden;/*超出内容隐藏*/
				text-overflow: ellipsis;/*设置出现省略号*/
				display: -webkit-box;
				-webkit-line-clamp: 4;/*设置内容出现最大行数*/
				-webkit-box-orient: vertical;/*设置排版方向从上到下*/
			}
		</style>
		
		<div class="div2">
			测试一下多行溢出是否会出现哈哈哈！
		</div>
		<style>
			.div3{
				margin-top: 100px;
				width: 500px;
				background: skyblue;
				white-space: normal;/*可以让中文和单词在遇到容器边界的时候后自动换行，
					数字和字母不符合这个规则
				* */
				
				word-break: break-all;/*所以这个时候就需要这个玩意出现了，控制非中文字符遇到边界的时候强制断行。*/
			
				white-space: nowrap;/*禁止所有内容*/
			}
		</style>
		<div class="div3">JJDJDIOJEIORJOWJERJOQJOIJRIOJQOWIJRIJWOEJORQWJEIRJOQWJRIOQJORIQWJQOWEJROIQJWEOIJROQJWER测试一下换行,看看牛不牛</div>
	</body>
</html>
